<template>
	<view class="index">
		<!-- 手机布局 -->
		<view class="mobile">
			<mMobileLayout></mMobileLayout>
		</view>
		
		<!-- 电脑布局 -->
		<view class="pc">
			<mPcLayout></mPcLayout>
		</view>
		
		<!-- 返回顶部 -->
		<u-back-top :icon-style="backTopIcon" :custom-style="backTop" :scroll-top="scrollTop" bottom="80" :duration="100"></u-back-top>
	</view>
</template>

<script>
	import mMobileLayout from '@/layout/m-mobileLayout/m-mobileLayout.vue';
	import mPcLayout from '@/layout/m-pcLayout/m-pcLayout.vue';
	export default {
		components: {
			mMobileLayout,
			mPcLayout
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			// 异步
			this.$store.dispatch('globalInit');
		},
		data() {
			return {
				scrollTop: 0,
				backTop: {
					width: '40px',
					height: '40px',
					cursor: 'pointer'
				},
				backTopIcon: {
					'font-size': '16px'
				}
			};
		},
	};
</script>

<style lang="scss" scoped>
	.index {
		@media (min-width: 768px) {
			.pc {
				display: block;
			}

			.mobile {
				display: none;
			}

		}

		@media (max-width: 768px) {
			.pc {
				display: none;
			}

			.mobile {
				display: block;
			}

		}
	}
</style>
